<template>
	<view>
		<view class="map">
			<view class="map-wrap">
				<map id="map" style="width: 100%; height: 100vh;" :latitude="latitude" :longitude="longitude" show-location @tap="handleTapMap"
				 @regionchange="handleRegionchangeMap">
				</map>
				<view class="center" v-if="travelsStatus==='to'">
					<image src="../../static/imgs/icons/to-icon.png" mode=""></image>
				</view>
				<view class="center" v-else>
					<image src="../../static/imgs/icons/from-icon.png" mode=""></image>
				</view>
			</view>
			<view class="controls-title">
				<view class="address-wrap">
					<image class="location-icon" src="../../static/imgs/icons/location.png"></image>
					<!-- #ifdef MP-WEIXIN -->
					<picker mode="region" @change="bindPickerChange">
						<view class="uni-input">{{curChoosedAddress && curChoosedAddress.ad_info && curChoosedAddress.ad_info.city}}</view>
					</picker>
					<!-- #endif -->
					<!-- #ifdef H5 -->
					<view @click="showMulLinkageThreePicker" class="uni-input">{{curChoosedAddress && curChoosedAddress.ad_info && curChoosedAddress.ad_info.city}}</view>
					<!-- #endif -->
					<!-- <view class="txt">{{curChoosedAddress.ad_info.city}}</view> -->
				</view>
				<view class="input">
					<input type="text" v-model="searchText" placeholder="输入地址名称" @input="handleSearchAddress(searchText)" />
				</view>
			</view>

			<view class="list">
				<view class="item" v-for="(item, index) in searchAddressList" :key="index" @click="handleChooseAddress(item)">
					<view class="tit">{{item.title}}</view>
					<view class="address">{{item.address}}</view>
				</view>
			</view>

			<view class="choosed_address-wrap">
				<view class="choosed_address">
					<!-- #ifdef MP-WEIXIN -->
					<text class="tip">当前位置：</text>
					{{curChoosedAddress.title ||  curChoosedAddress.formatted_addresses &&   curChoosedAddress.formatted_addresses.recommend || '定位中...'}}
					<!-- #endif -->
					<!-- #ifdef H5 -->
					<text class="tip">当前位置：</text>
					{{curChoosedAddress && curChoosedAddress.title || ( curChoosedAddress && curChoosedAddress.formatted_addresses && curChoosedAddress.formatted_addresses.recommend)  || '定位中...'}}
					<!-- #endif -->
				</view>
				<view class="btn" @click="handleConfirmChooseAddress">确定</view>
			</view>

		</view>
		
		<!-- #ifdef H5 -->
		<!-- 三级城市联动选择器 -->
		<mpvue-city-picker :themeColor="themeColor" ref="mpvueCityPicker" :pickerValueDefault="cityPickerValueDefault"
		 @onCancel="onCancel" @onConfirm="onConfirm"></mpvue-city-picker>
		<!-- #endif -->
	</view>
</template>

<script>
	var QQMapWX = require('@/utils/qqmap-wx-jssdk/qqmap-wx-jssdk.min.js');
	var qqmapsdk;
	import $DB from '../../utils/debounce.js';
	// #ifdef H5
	import mpvueCityPicker from '@/components/mpvue-citypicker/mpvueCityPicker.vue'; // 三级城市选择联动
	import cityData from '@/common/city.data.js';
	// #endif
	export default {
		components: {
			// #ifdef H5
			mpvueCityPicker
			// #endif
		},
		data() {
			return {
				travelsStatus: '', // to出发地选择 | form目的地选择
				title: 'map',
				latitude: 39.90960,
				longitude: 116.39722,
				searchText: '',
				searchAddressList: [],
				curChoosedAddress: {},
				covers: [{
					id: 1,
					latitude: 39.909,
					longitude: 116.39742,
					iconPath: '/static/imgs/icons/from-icon.png',
					width: 18,
					height: 34,
				}],
				showSearchInput: true, // 页面是否展示搜索款

				// #ifdef H5
				// 三级联动
				pickerText: '', // 三级联动得到的值
				pickerViewText: {}, // 页面需要的值 
				province: '', // 省
				city: '', // 市
				area: '', // 区
				mulLinkageTwoPicker: cityData, // 导入的数据
				cityPickerValueDefault: [0, 0, 1], // 三级联动选取的值
				themeColor: '#007AFF', // 确定的主题色
				// #endif
			}
		},
		onLoad(opt) {
			this.initMap();
			this.getLocation();
			this.travelsStatus = opt && opt.travelsStatus
			if (this.travelsStatus == 'to') {
				this.$set(this.covers[0], 'iconPath', '/static/imgs/icons/to-icon.png')
			} else {
				this.$set(this.covers[0], 'iconPath', '/static/imgs/icons/from-icon.png')
			}
		},
		methods: {
			// #ifdef H5
			// 取消时的停靠的数据,下次打开在这个位置
			onCancel(e) {
				console.log(e)
			},
			// 三级联动选择
			showMulLinkageThreePicker() {
				this.$refs.mpvueCityPicker.show()
			},
			// 处理联动数据
			onConfirm(e) {
				this.pickerText = JSON.stringify(e)
				this.pickerViewText = JSON.parse(this.pickerText)
				let str = this.pickerViewText.label.split('-')
				this.province = str[0]
				this.city = str[1]
				this.area = str[2]
				this.curChoosedAddress.ad_info.city = this.city
				this.$forceUpdate()
			},
			// #endif

			bindPickerChange(e) {
				// console.log(e);
				this.curChoosedAddress.ad_info.city = e.detail.value[0]
				this.$forceUpdate()
			},
			initMap() {
				qqmapsdk = new QQMapWX({
					key: 'C7JBZ-VQD6D-BVZ4C-PHTJO-HNPSF-ORFT5'
				});
			},
			getLocation() {
				let _this = this
				uni.getLocation({
					type: 'gcj02',
					success:async function(res) {
						let {
							latitude,
							longitude
						} = res
						_this.latitude = latitude // 当前位置的纬度
						_this.longitude = longitude // 当前位置的经度
						// #ifdef MP-WEIXIN
						_this.reverseGeocoder(latitude, longitude)
						// #endif
						// #ifdef H5
						let data = await _this.exchangeDingwei(latitude, longitude)
						_this.curChoosedAddress = data.result
						// #endif
						_this.covers[0].latitude = latitude // 当前位置的纬度
						_this.covers[0].longitude = longitude // 当前位置的经度
					}
				});
			},
			// 逆地址解析
			reverseGeocoder(latitude, longitude) {
				let _this = this
				qqmapsdk.reverseGeocoder({
					location: {
						latitude,
						longitude
					},
					success: function(res) {
						console.log(res.result);
						_this.curChoosedAddress = res.result
					},
				});
			},
			handleSearchAddress: $DB(function(text) {
				let _this = this
				qqmapsdk.search({
					keyword: text,
					region: _this.curChoosedAddress.ad_info.city,
					success: function(res) {
						_this.searchAddressList = res.data
					},
					fail: function(res) {
						uni.showToast({
							title: '地址搜索失败',
							icon: 'none'
						})
					}
				})
			}, 250),
			handleChooseAddress(item) {
				this.curChoosedAddress = item
				this.searchText = ''
				this.searchAddressList = []
				let {
					lat,
					lng
				} = item.location
				this.latitude = lat
				this.longitude = lng
			},
			async handleTapMap(e) {
				let {
					latitude,
					longitude
				} = e.detail
				this.latitude = latitude
				this.longitude = longitude
				// #ifdef MP-WEIXIN
					this.reverseGeocoder(latitude, longitude)
				// #endif
				// #ifdef H5
				let data = await _this.exchangeDingwei(latitude, longitude)
				_this.curChoosedAddress = data.result
				// #endif
			},
			// 地图选点变化
			handleRegionchangeMap(e) {
				console.log(e);
				let _this = this
				let mapCtx = uni.createMapContext("map", this)
				mapCtx.getCenterLocation({
					type: 'gcj02',
					success: async  function(res) {
						let {
							latitude,
							longitude
						} = res
						_this.latitude = latitude // 当前位置的纬度
						_this.longitude = longitude // 当前位置的经度
						// #ifdef MP-WEIXIN
						_this.reverseGeocoder(latitude, longitude) // 更新位置
						// #endif
						// #ifdef H5
						let data = await _this.exchangeDingwei(latitude, longitude)
						_this.curChoosedAddress = data.result
						// #endif
						_this.covers[0].latitude = latitude // 当前位置的纬度
						_this.covers[0].longitude = longitude // 当前位置的经度
					}
				})
			},
			// 点击确定
			handleConfirmChooseAddress() {
				this.$store.commit('upChoosedAddressObj', {
					[this.travelsStatus]: this.curChoosedAddress
				})
				uni.navigateBack({
					delta: 1
				})
			},
		},
		onBackPress() {
			if (this.$refs.mpvueCityPicker.showPicker) {
				this.$refs.mpvueCityPicker.pickerCancel(); // picker废除 性能优化
				return true;
			}
		},
	}
</script>

<style lang="scss" scoped>
	.map-wrap {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		/* #ifdef MP-WEIXIN */
		z-index: -1;
		/* #endif */

		.center {
			position: absolute;
			top: 47.6%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 36rpx;
			height: 68rpx;
		}
	}

	.controls-title {
		position: relative;
		width: 690rpx;
		height: 64rpx;
		margin: 18rpx auto;
		border-radius: 32rpx;
		background-color: #fff;
		display: flex;
		align-items: center;

		.address-wrap {
			font-size: 26rpx;
			display: flex;
			width: 152rpx;
			justify-content: space-evenly;
			color: $blue;
			border-right: 1px solid #ccc;

			.location-icon {
				width: 22rpx;
				height: 28rpx;
			}
		}

		.input {
			flex: 1;
			background: url(../../static/imgs/icons/search-icon.png) no-repeat left center;
			background-size: 26rpx 26rpx;
			padding: 0 40rpx;
			margin-left: 30rpx;
		}
	}

	.list {
		display: flex;
		flex-direction: column;
		width: 690rpx;
		margin: 0 auto;
		background-color: #fff;
		border-radius: 12rpx;

		.item {
			display: flex;
			flex-direction: column;
			padding: 20rpx;
			border-bottom: 1px solid #ebebeb;

			.tit {
				font-size: 32rpx;
			}

			.address {
				font-size: 26rpx;
				color: #999;
			}
		}
	}

	.choosed_address-wrap {
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		padding: 30rpx;
		// height: 98rpx;
		background-color: #fff;

		.choosed_address {
			font-size: 28rpx;
			flex: 1;
			padding-right: 20rpx;

			.tip {
				color: $yellow;
			}
		}

		.btn {
			font-size: 32rpx;
			color: #fff;
			width: 100rpx;
			text-align: center;
			height: 72rpx;
			line-height: 72rpx;
			background: $yellow;
			border-radius: 12rpx;
		}
	}
</style>
